<template>
	<view class="container">
		<view class="item">
			<view class="tab">
				<block v-for="(item,index) in items1" :key="index">
					<text :class="['',Inv1== index?'on':'']" @click="Inv1=index">{{item}}</text>
				</block>
			</view>
			<view v-show="Inv1 == 0">
				<view class="brdge">
					<text :class="['',Inv1== index?'on':'']" @click="Inv1=index" v-for="(item, index) in list" :key="index">{{item.carYear}}</text>
				</view>
				<view class="swiper">
					<swiper class="swiper" :interval="3000" :duration="1000" :indicator-dots="false"
						:current="topSwiperIndex" @change="topSwiperTab">
						<swiper-item v-for="(item,index) in topSwiper" :key="index">
							<view class="swiper-item">
								<image :src="item.src" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
					<!-- 自定义指示点dots -->
					<view class="dots">
						<text>{{topSwiperIndex+1}}/{{topSwiper.length}}</text>
					</view>
				</view>
				<view class="tit">车型参数</view>
				<view class="list" v-for="(item, index) in list" :key="index">
					<view class="uni-flex" v-if="item.jinDeng">
						<text>近 光</text>
						<view class="uni-flex-item">{{item.jinDeng}}</view>
					</view>
					<view class="uni-flex" v-if="item.yuanDeng">
						<text>远 光</text>
						<view class="uni-flex-item">{{item.yuanDeng}}</view>
					</view>
					<view class="uni-flex">
						<text>雾 灯</text v-if="item.wuDeng">
						<view class="uni-flex-item">{{item.wuDeng}}</view>
					</view>
					<view class="uni-flex" v-if="item.exchangeDengVideoUrl">
						<text>换灯视频</text>
						<view class="uni-flex-item">{{item.exchangeDengVideoUrl}}</view>
					</view>
					<view class="uni-flex" v-if="item.kapan">
						<text>专用卡座</text>
						<view class="uni-flex-item">{{item.kapan}}</view>
					</view>
					<view class="uni-flex" v-if="item.jieMa">
						<text>解码器</text>
						<view class="uni-flex-item">{{item.jieMa}}</view>
					</view>
					<view class="uni-flex" v-if="item.fangchenzhao">
						<text>防尘罩</text>
						<view class="uni-flex-item">{{item.fangchenzhao}}</view>
					</view>
					<view class="uni-flex" v-if="item.installEasy">
						<text>安装难易</text>
						<view class="uni-flex-item">{{item.installEasy}}</view>
					</view>
					<view class="uni-flex" v-if="item.remark">
						<text>备 注</text>
						<view class="uni-flex-item">{{item.remark}}</view>
					</view>
					<view class="uni-flex" v-if="item.changeDengVideoUrl">
						<text>改装视频</text>
						<view class="uni-flex-item">{{item.changeDengVideoUrl}}</view>
					</view>
					<view class="uni-flex" v-if="item.originGlueType">
						<text>原胶类型</text>
						<view class="uni-flex-item">{{item.originGlueType}}</view>
					</view>
					<view class="uni-flex" v-if="item.standSupport">
						<text>专用支架</text>
						<view class="uni-flex-item">{{item.standSupport}}</view>
					</view>
					<view class="uni-flex" v-if="item.jieMa">
						<text>是否解码</text>
						<view class="uni-flex-item">{{item.jieMa}}</view>
					</view>
					<view class="uni-flex" v-if="item.allJoinRemark">
						<text>大灯总成</text>
						<view class="uni-flex-item">{{item.allJoinRemark}}</view>
					</view>
				</view>
				
			</view>
			<view v-show="Inv1 == 1">2222222222222</view>
			<view v-show="Inv1 == 2">33333333333</view>
			<view v-show="Inv1 == 3">4444444444</view>
			<view v-show="Inv1 == 4">555555555555</view>
		</view>
		<view class="news">
			<view class="box" v-for="(itemn, indexn) in shareList" :key="indexn">
				<view class="uni-inline-item hd">
					<image mode="widthFix" src="../../static/images/pro_14.png"></image>
					<view class="uni-flex-item">
						<view class="h3">玖鼎之家</view>
						<view class="txt">46分钟前</view>
					</view>
					<view class="btn" @click="">分享</view>
					<!-- <button type="default" size="mini">分享</button> -->
				</view>
				<view class="bd">
					<view class="p">近光偏心，需要H15专用车灯型号</view>
					<view class="video">
						<image mode="widthFix" src="../../static/images/pro_13.png"></image>
						<image mode="widthFix" src="../../static/images/pro_15.png" class="pic"></image>
					</view>
				</view>
				<view class="ft">
					<image mode="widthFix" src="../../static/images/ly.png"></image>
					<text>297</text>
					<view class="jichu">
						<image class="collection" mode="widthFix" src="../../static/images/zan.png" v-show="showUpImg"
							@click="changeImg"></image>
						<image class="collection" mode="widthFix" src="../../static/images/zan_on.png"
							v-show="!showUpImg" @click="changeImg"></image>
					</view>
					<text>936</text>
				</view>
			</view>
		</view>
		<view class="bottom" @click="goRelease">发布</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				Inv1: 0,
				items1: ['车灯', '车衣', '窗膜', '座椅', '脚垫', '改色膜'],
				showUpImg: true,
				showUpImg1: true,
				topSwiperIndex: 0,
				topSwiper: [{
						src: require('../../static/images/pro_13.png')
					},
					{
						src: require('../../static/images/pro_13.png')
					},
					{
						src: require('../../static/images/pro_13.png')
					},
					{
						src: require('../../static/images/pro_13.png')
					},
					{
						src: require('../../static/images/pro_13.png')
					}
				],
				modelId: 0,
				list: [],
			}

		},

		onLoad(option) {
			this.modelId = option.modelId || 0;
			if (!this.modelId) {
				return this.$util.Tips({
					title: '车型不存在'
				}, {
					tab: 3
				});
			}
			this.getModelDetail();
		},

		onShow() {

		},
		methods: {
			topSwiperTab(e) {
				var that = this;
				this.topSwiperIndex = Number(e.target.current);
			},

			changeTab1(Inv1) {
				that.navIdx = Inv1;
			},

			changeImg: function() {
				this.showUpImg = !this.showUpImg
			},

			changeImg1: function() {
				this.showUpImg1 = !this.showUpImg1
			},

			goRelease() {
				this.$util.Tips('/pages/home_fabu/index');
			},

			getModelDetail() {
				let that = this;
				that.$request.get('car/getModelDetail', {
					modelId: that.modelId
				}).then(res => {
					this.list = res.value;
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F6F7F9;
	}

	.container {}

	.container .tab {
		display: flex;
		align-items: center;
		text-align: center;
		background: #fff;
	}

	.container .tab text {
		padding: 20rpx 0;
		position: relative;
		margin-right: 40rpx;
	}

	.container .tab .on {
		font-weight: bold;
		font-size: 36rpx;
		color: #06A972;
	}

	.container .tab .on::after {
		content: '';
		width: 72rpx;
		height: 4rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
		background: #06A972;
		border-radius: 2px 2px 2px 2px;
	}

	.swiper,
	.swiper image {
		height: 320rpx;
		border-radius: 20rpx;
		width: 100%;
		position: relative;
	}

	.dots {
		position: absolute;
		font-size: 24rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 30rpx;
		color: #fff;
		bottom: 20rpx;
		right: 30rpx;
		padding: 0 20rpx;
	}

	.item {
		padding: 0 40rpx;
		background-color: #fff;
	}

	.item .brdge {
		font-size: 24rpx;
		padding: 30rpx 0;
	}

	.item .brdge text {
		/* width: 113rpx; */
		line-height: 51rpx;
		height: 51rpx;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		background: #F3F3F3;
		margin-right: 20rpx;
		border-radius: 26rpx;
		padding: 5rpx 15rpx;
	}

	.item .brdge text~text {
		margin-top: 10rpx;
	}
	
	.item .tit {
		font-weight: bold;
		padding: 30rpx 0;
		border-bottom: 1px solid #F2F2F2;
	}

	.item .list {
		line-height: 85rpx;
		padding: 20rpx 0;
	}

	.item .list text {
		margin-right: 40rpx;
		color: #727272;
		width: 112rpx;
		text-align: justify;
		display: block;
		text-align-last: justify;
	}

	.jichu {
		display: inline-block;
	}

	.news {
		background: #FFFFFF;
		padding: 0 40rpx;
		margin-top: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.news .box {
		border-bottom: 1rpx solid #F2F2F2;
	}

	.news .box:last-child {
		border: none !important;
	}

	.news .hd {
		padding: 30rpx 0;
	}

	.news .hd .h3 {
		font-weight: bold;
	}

	.news .hd .txt {
		color: #666666;
		font-size: 22rpx;
	}

	.news .hd button {
		font-size: 24rpx;
		background: #F3F3F3;
		border-radius: 50rpx;
		border: none;
	}

	.news .hd .btn {
		padding: 8rpx 30rpx;
		font-size: 24rpx;
		background-color: #f3f3f3;
		border-radius: 50rpx;
		box-shadow: 0px 4px 4px 0px #e4d9d9;
	}

	.news .hd image {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.news .bd .p {
		padding: 0 0 20rpx;
	}

	.news .video {
		position: relative;
	}

	.news .video .pic {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 72rpx;
		height: 72rpx;
	}

	.news .ft {
		text-align: right;
		padding: 20rpx 30rpx;
		color: #979797;
	}

	.news .ft image {
		width: 32rpx;
		height: 32rpx;
		margin: -3px 5px 0 30rpx;
	}

	.bottom {
		position: fixed;
		right: 40rpx;
		bottom: calc(90rpx + constant(safe-area-inset-bottom));
		bottom: calc(90rpx + env(safe-area-inset-bottom));
		/* bottom: 80rpx; */
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 99;
		border-radius: 50%;
		background: #06A972;
		box-shadow: 0px 3px 6px 1px rgba(6, 169, 114, 0.16);
	}
</style>
